<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_数据集dataset的使用</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>
</head>
<body>
  <div id="main" style="width:800px;height:500px"></div>
</body>
<script>
  let dom=document.querySelector('#main');
  const myechart=echarts.init(dom);
  let data=[
    ["衣服",10,22,'x',10],
    ["直播",12,55,'y',60],
    ["游戏",16,44,'z',50],
    ["电影",19,32,'t',70],
  ]
  option={
    //数据集
    dataset: {
      source:data,
    },
    //标题
    title: {
      text: 'echarts的基本使用01',
      //子标题
      // subtext:'子标题',
      left: 'left',
      textStyle: {
        color: '#29d'
      }
    },
    //x轴
    xAxis: {
      data:["衣服",'直播','游戏','电影']
    },
    //y轴
    yAxis: {
      show: true,
      //展示y轴线
      axisLine: {
        show: true,
      },
      //展示刻度
      axisTick: {
        show: true,
      }
    },
    //系列切换组件
    legend: {
      data: ['销量', '价格','饼图']
    },
    //详情显示组件
    tooltip: {},
    //下载、回退、保存、刷新...功能盒子组件
    toolbox: {
      show: true,
      feature: {
        //各个功能（5个）在页面展示的顺序可调，移动代码段进行调整
        dataZoom: {
          yAxisIndex: "none"
        },
        dataView: {
          readOnly: false
        },
        magicType: {
          type: ["line", "bar"]
        },
        restore: {},
        saveAsImage: {}
      }
    },
    //放大滑块
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter'
      },
      {
        id: 'dataZoomY',
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'empty'
      }
    ],
    //调整布局
    grid:{
      //left:100,
    },
    //展示图形（条形图、折线图）的系列配置series
    series: [
      {
        type: 'bar',
        name: '销量',
        // data: [5, 20, 36, 10, 10, 20],
        color: '',
        label: {
          show: true
        },
        encode:{
          x:0,
          y:1
        }
      },
      {
        type: 'line',
        name: '价格',
        // data: [8, 16, 33, 11, 6, 17],
        color: '',
        label: {
          show: true
        },
        encode:{
          x:0,
          y:2
        }
      },
      {
        name:'饼图',
        type: 'pie',
        // data: [
        //   {
        //     value: 335,
        //     name: '直接访问'
        //   },
        //   {
        //     value: 234,
        //     name: '联盟广告'
        //   },
        //   {
        //     value: 1548,
        //     name: '搜索引擎'
        //   }
        // ],
        width:250,
        height:250,
        left:250,
        top:100,
        radius:30,
        encode:{
          value:4,
          itemName:0
        }
      }
    ]
  };
  myechart.setOption(option)
</script>
</html>
